<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园可视化大屏</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#0ea5e9',
                        'primary-dark': '#0284c7',
                        'secondary': '#6366f1',
                        'accent': '#f97316',
                        'dark': '#0f172a',
                        'dark-light': '#1e293b',
                        'light-blue': '#38bdf8',
                        'cyan': '#06b6d4',
                        'teal': '#14b8a6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer base {
            @keyframes pulse-slow {
                0%, 100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.3;
                }
            }
        }
        
        @layer utilities {
            .text-shadow {
                text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
            }
            .border-glow {
                box-shadow: 0 0 5px rgba(56, 189, 248, 0.5);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(2, 132, 199, 0.05) 100%);
            }
            .bg-gradient-purple {
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%);
            }
            .bg-gradient-orange {
                background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.05) 100%);
            }
            .bg-gradient-teal {
                background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(13, 148, 136, 0.05) 100%);
            }
            .grid-dashboard {
                display: grid;
                grid-template-columns: 60px 1fr 300px;
                grid-template-rows: 60px 1fr 200px;
                grid-template-areas:
                    "header header header"
                    "sidebar main right"
                    "sidebar video video";
                height: 100vh;
            }
            .grid-header {
                grid-area: header;
            }
            .grid-sidebar {
                grid-area: sidebar;
            }
            .grid-main {
                grid-area: main;
            }
            .grid-right {
                grid-area: right;
            }
            .grid-video {
                grid-area: video;
            }
            .clip-path-polygon {
                clip-path: polygon(
                    0% 0%, 
                    95% 0%, 
                    100% 5%, 
                    100% 100%, 
                    5% 100%, 
                    0% 95%
                );
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .animate-pulse-slow {
                animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .bg-scanline {
                background: linear-gradient(to bottom, transparent 50%, rgba(0, 170, 255, 0.05) 50%);
                background-size: 100% 4px;
                animation: scanline 0.8s linear infinite;
            }
            @keyframes scanline {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 0 20px;
                }
            }
        }
    </style>
</head>
<body class="bg-gray-900 text-white overflow-hidden">
    <div class="grid-dashboard">
        <!-- 顶部导航栏 -->
        <header class="grid-header bg-dark-light border-b border-primary/30 flex items-center justify-between px-6">
            <div class="flex items-center">
                <h1 class="text-xl font-bold text-primary text-shadow">智慧校园可视化大屏</h1>
            </div>
            <div class="flex items-center space-x-6">
                <div class="flex space-x-4">
                    <button class="px-3 py-1 text-sm bg-primary/20 hover:bg-primary/30 rounded border border-primary/30 transition-all">校园概览</button>
                    <button class="px-3 py-1 text-sm bg-dark-light hover:bg-primary/30 rounded border border-primary/30 transition-all">智能预警</button>
                    <button class="px-3 py-1 text-sm bg-dark-light hover:bg-primary/30 rounded border border-primary/30 transition-all">实时态势</button>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="text-primary hover:text-light-blue transition-colors">
                        <i class="fa fa-bell-o"></i>
                    </button>
                    <button class="text-primary hover:text-light-blue transition-colors">
                        <i class="fa fa-cog"></i>
                    </button>
                    <div class="text-sm">
                        <span id="current-date-time" class="text-gray-300"></span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 左侧菜单 -->
        <aside class="grid-sidebar bg-dark-light border-r border-primary/30 flex flex-col items-center py-4 space-y-6">
            <button class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary hover:bg-primary/30 transition-all">
                <i class="fa fa-home"></i>
            </button>
            <button class="w-12 h-12 rounded-full bg-dark-light flex items-center justify-center text-gray-400 hover:bg-primary/30 hover:text-primary transition-all">
                <i class="fa fa-map-marker"></i>
            </button>
            <button class="w-12 h-12 rounded-full bg-dark-light flex items-center justify-center text-gray-400 hover:bg-primary/30 hover:text-primary transition-all">
                <i class="fa fa-video-camera"></i>
            </button>
            <button class="w-12 h-12 rounded-full bg-dark-light flex items-center justify-center text-gray-400 hover:bg-primary/30 hover:text-primary transition-all">
                <i class="fa fa-bar-chart"></i>
            </button>
            <button class="w-12 h-12 rounded-full bg-dark-light flex items-center justify-center text-gray-400 hover:bg-primary/30 hover:text-primary transition-all">
                <i class="fa fa-shield"></i>
            </button>
            <button class="w-12 h-12 rounded-full bg-dark-light flex items-center justify-center text-gray-400 hover:bg-primary/30 hover:text-primary transition-all">
                <i class="fa fa-cog"></i>
            </button>
        </aside>

        <!-- 中央主要内容区域 -->
        <main class="grid-main bg-dark p-4 overflow-hidden relative">
            <!-- 背景图 -->
            <div class="absolute inset-0 z-0 opacity-20">
                <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/435c1670c9f24cc8b7d2f734d4eda751~tplv-a9rns2rl98-image.image?rcl=2025103109090744306B3F1EE1F452C98F&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764464972&x-signature=axxYFKzWW6eHnGNDRyilB6JoXJg%3D" 
                     alt="背景" class="w-full h-full object-cover">
            </div>
            
            <!-- 地图区域 -->
            <div class="relative z-10 w-full h-full bg-dark/50 rounded-lg border border-primary/30 clip-path-polygon overflow-hidden">
                <!-- 校园地图可视化 -->
                <div class="absolute inset-0 bg-black">
                    <!-- 使用高质量的校园地图图片 -->
                    <img src="/static/images/campus_map.png" alt="校园地图" class="w-full h-full object-cover">
                    
                    <!-- 添加动画效果层 -->
                    <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div>
                    
                    <!-- 使用CSS动画创建动态扫描线效果 -->
                    <div class="absolute inset-0 bg-scanline"></div>
                    
                    <!-- 地图标题 -->
                    <div class="absolute bottom-4 left-4 text-white">
                        <h3 class="text-xl font-bold text-shadow">校园地图可视化</h3>
                        <p class="text-sm text-gray-300">实时监控校园各区域状态</p>
                    </div>
                </div>
                
                <!-- 地图标记点 -->
                <div class="absolute w-4 h-4 bg-blue-400 rounded-full animate-pulse-slow" style="top: 30%; left: 40%"></div>
                <div class="absolute w-4 h-4 bg-green-400 rounded-full animate-pulse-slow" style="top: 50%; left: 60%"></div>
                <div class="absolute w-4 h-4 bg-yellow-400 rounded-full animate-pulse-slow" style="top: 70%; left: 30%"></div>
                <div class="absolute w-4 h-4 bg-red-400 rounded-full animate-pulse-slow" style="top: 40%; left: 70%"></div>
                <div class="absolute w-4 h-4 bg-purple-400 rounded-full animate-pulse-slow" style="top: 60%; left: 20%"></div>
            </div>
        </main>

        <!-- 右侧数据面板 -->
        <aside class="grid-right bg-dark-light p-4 overflow-y-auto scrollbar-hide">
            <div class="space-y-4">
                <!-- 数据概览 -->
                <div class="bg-gradient-blue rounded-lg border border-primary/30 p-4">
                    <h3 class="text-sm text-gray-400 mb-3">数据概览</h3>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-primary">128</div>
                            <div class="text-xs text-gray-400">在线设备</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-secondary">32</div>
                            <div class="text-xs text-gray-400">监控区域</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-accent">8</div>
                            <div class="text-xs text-gray-400">异常预警</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-teal">512</div>
                            <div class="text-xs text-gray-400">数据采集点</div>
                        </div>
                    </div>
                </div>
                
                <!-- 能耗监测 -->
                <div class="bg-gradient-purple rounded-lg border border-secondary/30 p-4">
                    <h3 class="text-sm text-gray-400 mb-3">能耗监测</h3>
                    <div class="h-40">
                        <canvas id="energyChart"></canvas>
                    </div>
                </div>
                
                <!-- 安全态势 -->
                <div class="bg-gradient-orange rounded-lg border border-accent/30 p-4">
                    <h3 class="text-sm text-gray-400 mb-3">安全态势</h3>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <div class="text-sm">门禁安全</div>
                            <div class="w-1/2 bg-gray-700 rounded-full h-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
                            </div>
                            <div class="text-xs text-green-500">92%</div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="text-sm">消防系统</div>
                            <div class="w-1/2 bg-gray-700 rounded-full h-2">
                                <div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div>
                            </div>
                            <div class="text-xs text-yellow-500">78%</div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="text-sm">监控覆盖</div>
                            <div class="w-1/2 bg-gray-700 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                            <div class="text-xs text-blue-500">85%</div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="text-sm">网络安全</div>
                            <div class="w-1/2 bg-gray-700 rounded-full h-2">
                                <div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div>
                            </div>
                            <div class="text-xs text-red-500">65%</div>
                        </div>
                    </div>
                </div>
                
                <!-- 环境监测 -->
                <div class="bg-gradient-teal rounded-lg border border-teal/30 p-4">
                    <h3 class="text-sm text-gray-400 mb-3">环境监测</h3>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="text-center">
                            <div class="text-xl font-bold text-teal">24°C</div>
                            <div class="text-xs text-gray-400">温度</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-bold text-teal">45%</div>
                            <div class="text-xs text-gray-400">湿度</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-bold text-teal">85%</div>
                            <div class="text-xs text-gray-400">空气质量</div>
                        </div>
                        <div class="text-center">
                            <div class="text-xl font-bold text-teal">3.2m/s</div>
                            <div class="text-xs text-gray-400">风速</div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 底部视频监控区域 -->
        <section class="grid-video bg-dark-light p-4">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-medium text-gray-300">实时监控</h2>
                <!-- 分页按钮已移除 -->
            </div>
            
            <div class="grid grid-cols-4 gap-4 h-[calc(100%-40px)]">
                <!-- 视频监控区域 1 -->
                <div class="bg-dark rounded-lg border border-primary/30 overflow-hidden relative group">
                    <div class="absolute top-2 left-2 z-10 bg-primary/80 text-white text-xs px-2 py-1 rounded">
                        教学楼 A
                    </div>
                    <div class="relative w-full h-full">
                        <img src="/static/images/classroom_a.png" 
                             alt="监控画面" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <button class="w-10 h-10 rounded-full bg-primary/80 flex items-center justify-center hover:bg-primary transition-all">
                                <i class="fa fa-play text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 视频监控区域 2 -->
                <div class="bg-dark rounded-lg border border-primary/30 overflow-hidden relative group">
                    <div class="absolute top-2 left-2 z-10 bg-primary/80 text-white text-xs px-2 py-1 rounded">
                        图书馆
                    </div>
                    <div class="relative w-full h-full">
                        <img src="/static/images/library.png" 
                             alt="监控画面" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <button class="w-10 h-10 rounded-full bg-primary/80 flex items-center justify-center hover:bg-primary transition-all">
                                <i class="fa fa-play text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 视频监控区域 3 -->
                <div class="bg-dark rounded-lg border border-primary/30 overflow-hidden relative group">
                    <div class="absolute top-2 left-2 z-10 bg-primary/80 text-white text-xs px-2 py-1 rounded">
                        操场
                    </div>
                    <div class="relative w-full h-full">
                        <img src="/static/images/playground.png" 
                             alt="监控画面" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <button class="w-10 h-10 rounded-full bg-primary/80 flex items-center justify-center hover:bg-primary transition-all">
                                <i class="fa fa-play text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 视频监控区域 4 -->
                <div class="bg-dark rounded-lg border border-primary/30 overflow-hidden relative group">
                    <div class="absolute top-2 left-2 z-10 bg-primary/80 text-white text-xs px-2 py-1 rounded">
                        食堂
                    </div>
                    <div class="relative w-full h-full">
                        <img src="/static/images/cafeteria.png" 
                             alt="监控画面" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <button class="w-10 h-10 rounded-full bg-primary/80 flex items-center justify-center hover:bg-primary transition-all">
                                <i class="fa fa-play text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 更新当前日期时间
        function updateDateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit', 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit',
                hour12: false
            };
            document.getElementById('current-date-time').textContent = now.toLocaleString('zh-CN', options);
        }
        
        // 初始化并每秒更新一次日期时间
        updateDateTime();
        setInterval(updateDateTime, 1000);
        
        // 初始化能耗图表
        const ctx = document.getElementById('energyChart').getContext('2d');
        const energyChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
                datasets: [{
                    label: '电耗 (kWh)',
                    data: [1200, 1350, 1100, 1400, 1300, 1250, 1350],
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: '水耗 (m³)',
                    data: [350, 320, 380, 400, 360, 340, 330],
                    borderColor: '#0ea5e9',
                    backgroundColor: 'rgba(14, 165, 233, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            color: '#94a3b8',
                            font: {
                                size: 10
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            color: 'rgba(148, 163, 184, 0.1)'
                        },
                        ticks: {
                            color: '#94a3b8',
                            font: {
                                size: 9
                            }
                        }
                    },
                    y: {
                        grid: {
                            color: 'rgba(148, 163, 184, 0.1)'
                        },
                        ticks: {
                            color: '#94a3b8',
                            font: {
                                size: 9
                            }
                        }
                    }
                }
            }
        });
        
        // 简化视频列表，只保留第一页内容
        const videoSources = [
            { name: "教学楼 A", src: "/static/images/classroom_a.png" },
            { name: "图书馆", src: "/static/images/library.png" },
            { name: "操场", src: "/static/images/playground.png" },
            { name: "食堂", src: "/static/images/cafeteria.png" }
        ];
        
        // 视频播放功能模拟
        document.querySelectorAll('.grid-video .grid > div button').forEach(button => {
            // 中文到英文的映射关系
            const titleToEnglish = {
                '教学楼 A': 'classroom_a',
                '图书馆': 'library',
                '操场': 'playground',
                '食堂': 'cafeteria',
                '行政楼': 'admin_building',
                '实验室': 'laboratory',
                '宿舍区': 'dormitory',
                '校门口': 'gate'
            };
            
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                const icon = this.querySelector('i');
                const img = this.closest('.relative').querySelector('img');
                
                if (icon.classList.contains('fa-play')) {
                    icon.classList.remove('fa-play');
                    icon.classList.add('fa-pause');
                    
                    // 实际的视频播放逻辑
                    // 使用video标签播放视频
                    const parentDiv = this.closest('.grid > div');
                    const title = parentDiv.querySelector('.absolute.top-2').textContent.trim();
                    // 使用映射获取英文文件名
                    const videoName = titleToEnglish[title] || title.toLowerCase().replace(/[\s\/]/g, '_');
                    
                    // 隐藏img标签
                    img.style.display = 'none';
                    
                    // 检查是否已经有video标签
                    let video = parentDiv.querySelector('video');
                    if (!video) {
                        // 创建新的video标签
                        video = document.createElement('video');
                        video.className = 'w-full h-full object-cover';
                        video.autoplay = true;
                        video.loop = true;
                        video.muted = true; // 自动播放需要静音
                        video.src = `/static/videos/${videoName}.mp4`;
                        img.parentNode.appendChild(video);
                    } else {
                        // 如果已经有video标签，更新src并播放
                        video.src = `/static/videos/${videoName}.mp4`;
                        video.play();
                    }
                } else {
                    icon.classList.remove('fa-pause');
                    icon.classList.add('fa-play');
                    
                    // 恢复显示图片并隐藏视频
                    img.style.display = 'block';
                    
                    // 暂停并隐藏视频
                    const video = this.closest('.grid > div').querySelector('video');
                    if (video) {
                        video.pause();
                        video.style.display = 'none';
                    }
                    
                    // 恢复原始图片
                    const parentDiv = this.closest('.grid > div');
                    const title = parentDiv.querySelector('.absolute.top-2').textContent.trim();
                    const videoInfo = videoSources.find(v => v.name === title);
                    if (videoInfo) {
                        img.src = videoInfo.src;
                    }
                }
            });
        });
    </script>
</body>
</html>
